<template>
  <div class="modify-wrap">
    <!-- <div class="show-title">当前管理员账户信息</div> -->
    <el-dialog :visible.sync="dialogVisible.show" center>
      <el-form
        :inline="true"
        :model="ruleform"
        ref="from1"
        :rules="rules"
        class="demo-form-inline form1"
      >
        <el-form-item
          label="用   户   名："
          label-position="left"
          label-width="110px"
          prop="user_wanted"
        >
          <el-input
            v-model="ruleform.user_wanted"
            message="用  户  名"
            :disabled="true"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="修 改 昵 称："
          label-position="left"
          label-width="110px"
          prop="modifyNickname"
        >
          <el-input
            v-model="ruleform.modifyNickname"
            message="修改昵称"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="修 改 密 码："
          label-position="left"
          label-width="110px"
          prop="modifyPwd"
          show-overflow-tooltip
        >
          <el-input
            v-model="ruleform.modifyPwd"
            message="修改密码"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="修 改 手 机："
          label-position="left"
          label-width="110px"
          prop="modifyMobile"
        >
          <el-input
            v-model.number="ruleform.modifyMobile"
            message="修改手机号"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="修 改 邮 箱："
          label-position="left"
          label-width="110px"
          prop="modifyEmail"
        >
          <el-input
            v-model="ruleform.modifyEmail"
            message="修改邮箱"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item
          label="登录有效期："
          label-position="left"
          label-width="110px"
          prop="token_expired"
        >
          <el-select v-model="ruleform.token_expired" placeholder="请选择">
            <el-option label="永不失效" :value="0"></el-option>
            <el-option label="10分钟" :value="10"></el-option>
            <el-option label="30分钟" :value="30"></el-option>
            <el-option label="60分钟" :value="60"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="选择角色：" prop="selRole">
          <el-checkbox-group v-model="ruleform.selRole">
            <el-checkbox
              :label="item.role_id"
              :role_id="item.role_id"
              :key="item.role_id"
              v-for="item in roleLabel"
              >{{ item.role_name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <br />
        <el-form-item label="选择业务范围--设备：" prop="businessRange">
          <el-radio-group v-model="ruleform.businessRange">
            <el-radio :label="-1">全部禁止</el-radio>
            <el-radio :label="0">全部允许</el-radio>
            <el-radio :label="1">指定范围</el-radio>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" plain @click="onSubmit1('from1')"
            >保存</el-button
          >
          <el-button type="warning" plain @click="onReset('from1')"
            >重置</el-button
          >
        </el-form-item>
        <br />
        <div class="org-box">
          <div class="org-name">选择分组：</div>
          <div class="org-scroll">
            <el-form-item label="" prop="selOrg">
              <!-- <div class="org-scroll"> -->
              <el-checkbox-group v-model="ruleform.selOrg">
                <el-checkbox
                  :label="item.org_id"
                  :key="item.org_id"
                  :org_id="item.org_id"
                  v-for="item in orgLabel"
                  >{{
                    item.gfather_name +
                    " - " +
                    item.father_name +
                    " - " +
                    item.org_name
                  }}</el-checkbox
                >
              </el-checkbox-group>
              <!-- </div> -->
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "adminSetting",
  components: {},
  props: {
    user: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.form.ruleForm.user_pwd !== "") {
        //   this.$refs[form.ruleForm].validateField("checkPass");
        // }
        callback();
      }
    };
    // 自定义验证邮箱
    var checkEmail = (rule, value, callback) => {
      const regEmail =
        /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (regEmail.test(value)) {
        //  console.log(regEmail.test(value));
        return callback();
      } else if (value == "") {
        return callback();
      } else {
        callback(new Error("请输入合法邮箱"));
        //callback();
      }
    };
    // 自定义验证手机号
    var checkPhone = (rule, value, callback) => {
      //  console.log(typeof value, "\\\\/");
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (phoneReg.test(value)) {
          callback();
        } else if (value == "") {
          return callback();
        } else {
          callback(new Error("电话号码格式不正确"));
          // callback();
        }
      }
    };
    return {
      user_name: "", //父组件带来的
      roleLabel: [], //添加中，角色的label
      orgLabel: [], //添加中，组织机构的label

      //添加1
      ruleform: {
        user_wanted: "",
        modifyNickname: "",
        modifyPwd: "",
        modifyMobile: "",
        modifyEmail: "",
        token_expired: 30,
        selRole: [],
        selOrg: [],
        businessRange: "",
      },
      rules: {
        modifyNickname: [
          { required: false, message: "请输入新的昵称", trigger: "blur" },
        ],
        modifyPwd: [
          {
            required: false,
            message: "请输入新的密码",
            trigger: "change",
          },
        ],
        modifyMobile: [
          { required: false, message: "请输入手机号码", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        modifyEmail: [
          { required: false, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        token_expired: [{ required: false, message: "", trigger: "blur" }],
        selRole: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个角色",
            trigger: "change",
          },
        ],
        selOrg: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个分组",
            trigger: "change",
          },
        ],
        businessRange: [
          { required: false, message: "请选择业务范围", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    user: {
      handler(newVal) {
        this.user_name = newVal;
        this.$set(this.ruleform, "user_wanted", newVal);
        this.getInit();
        this.getRoleLabel();
        this.getOrgLabel();
        this.getBusinessRangeLabel();

        /* if (this.$permissions.includes("sys/admin/update")) {
          this.getInit();
        }
        if (this.$permissions.includes("sys/admin/role/set")) {
          this.getRoleLabel();
        }
        if (this.$permissions.includes("sys/admin/org/set")) {
          this.getOrgLabel();
        }
        if (this.$permissions.includes("sys/admin/bizfor/set")) {
          this.getBusinessRangeLabel();
        }  */
      },
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //添加提交111
    onSubmit1(formName) {
      var that = this;
      let token_expired = that.ruleform.token_expired;
      var token_expired_sub;

      if (token_expired == "永不失效") {
        that.ruleform.token_expired = 0;
      } else if (token_expired == "10分钟") {
        that.ruleform.token_expired = 10;
      } else if (token_expired == "30分钟") {
        that.ruleform.token_expired = 30;
      } else if (token_expired == "60分钟") {
        that.ruleform.token_expired = 60;
      }
      that.$refs[formName].validate((valid) => {
        if (valid) {
          //   this.submit_fn1();  sys/admin/update
          //   this.submit_fn2();
          //   this.submit_fn3();
          //   this.submit_fn4();
          postData("/adminweb/sys/admin/update", {
            user_wanted: that.user_name,
            user_pwd: that.ruleform.modifyPwd,
            nick_name: that.ruleform.modifyNickname,
            mobile: that.ruleform.modifyMobile,
            email: that.ruleform.modifyEmail,
            token_expired: that.ruleform.token_expired,
            roles: this.ruleform.selRole,
            orgs: that.ruleform.selOrg,
            bizfors: [
              {
                biz_type: 0,
                biz_for: that.ruleform.businessRange,
              },
            ],
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("修改成功！");
                that.getInit();
                that.$emit("refreshTabeList");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("修改失败");
          return false;
        }
      });
    },
    submit_fn1() {
      let that = this;
      postData("/adminweb/sys/admin/update", {
        user_wanted: that.user_name,
        user_pwd: that.ruleform.modifyPwd,
        nick_name: that.ruleform.modifyNickname,
        mobile: that.ruleform.modifyMobile,
        email: that.ruleform.modifyEmail,
        token_expired: that.ruleform.token_expired,
      })
        .then((res) => {
          if (res.code == 0) {
            that.$message.success("修改成功！");
            that.getInit();
            that.$emit("refreshTabeList");
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    submit_fn2() {
      let that = this;
      postData("/adminweb/sys/admin/role/set", {
        user_wanted: that.user_name,
        roles: this.ruleform.selRole,
      })
        .then((res) => {
          if (res.code == 0) {
            that.$message.success("修改成功！");
            that.$emit("refreshTabeList");
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    submit_fn3() {
      let that = this;
      postData("/adminweb/sys/admin/org/set", {
        user_wanted: that.user_name,
        orgs: that.ruleform.selOrg,
      })
        .then((res) => {
          if (res.code == 0) {
            that.$message.success("修改成功！");
            that.$emit("refreshTabeList");
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    submit_fn4() {
      let that = this;
      postData("/adminweb/sys/admin/bizfor/set", {
        user_wanted: that.user_name,
        bizfors: [
          {
            biz_type: 0,
            biz_for: that.ruleform.businessRange,
          },
        ],
      })
        .then((res) => {
          if (res.code == 0) {
            that.$message.success("修改成功！");
            that.$emit("refreshTabeList");
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },

    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
    //1、获取管理员信息
    getInit() {
      postData("/adminweb/sys/admin/info", {
        user_wanted: this.user_name,
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            let datas = res.datas;
            this.ruleform.modifyNickname = datas.nick_name;
            this.ruleform.modifyMobile = datas.mobile;
            this.ruleform.modifyEmail = datas.email;
            //  console.log(datas.token_expired);
            if (datas.token_expired == 0) {
              this.ruleform.token_expired = "永不失效";
            } else {
              this.ruleform.token_expired = datas.token_expired + "分钟";
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //获取管理员的角色label
    getRoleLabel() {
      postData("/adminweb/role/list", {
        user_wanted: this.user_name,
      })
        .then((res) => {
          // console.log(res);
          var arr = [];
          if (res.code == 0) {
            let roles = res.datas.roles;
            this.roleLabel = roles;
            //初始的时候，根据authorized，勾选上
            for (var i = 0; i < roles.length; i++) {
              if (roles[i].authorized == 1) {
                arr.push(roles[i].role_id);
              }
            }
            this.$set(this.ruleform, "selRole", arr);
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //3获取管理员的组织机构的label
    getOrgLabel() {
      postData("/adminweb/org/list", {
        org_for_id: this.user_name,
        org_for: "admin",
      })
        .then((res) => {
          //  console.log(res);
          var arr = [];
          if (res.code == 0) {
            let orgs = res.datas.orgs;
            this.orgLabel = orgs;
            //初始的时候，根据authorized，勾选上
            for (var i = 0; i < orgs.length; i++) {
              if (orgs[i].authorized == 1) {
                arr.push(orgs[i].org_id);
              }
            }
            this.$set(this.ruleform, "selOrg", arr);
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //4、业务范围初始的时候,默认打点
    getBusinessRangeLabel() {
      postData("/adminweb/sys/admin/bizfor/list", {
        user_wanted: this.user_name,
      })
        .then((res) => {
          // var arr = [];
          if (res.code == 0) {
            let bizfors = res.datas.bizfors;
            //  console.log(bizfors);
            for (var i = 0; i < bizfors.length; i++) {
              if (bizfors[i].biz_type == 0) {
                this.ruleform.businessRange = bizfors[i].biz_for;
              }
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
  },
};
</script>
<style scoped>
/* 更改table,表头背景 */
.modify-wrap >>> .el-table--border th,
.el-table__fixed-right-patch {
  /* background: #c0dee2; */
  background: #f0f3f4;
}
.modify-wrap {
  width: 100%;
  height: auto;
  /* padding: 20px;
  padding-bottom: 80px; */
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 30px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 15px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.form1 {
  padding: 20px;
}
.modify-wrap >>> .el-form-item {
  margin-right: 20px !important;
}

/* .modify-wrap >>> .el-form-item:last-child {
  margin-left: 10% !important;
} */
.modify-wrap >>> .el-dialog__header {
  padding: 10px 0 !important;
}

/* .modify-wrap >>> .demo-form-inline {
  width: 23%;
  height: 454px;
  min-height: 454px;
  float: left;
  box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
  background: #fafafa;
  border-radius: 5px;
  padding: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
} */

.modify-wrap >>> .el-dialog {
  width: 60%;
  height: 600px;
  overflow-x: hidden;
  /* overflow-y: scroll; */
}
.modify-wrap >>> .el-dialog__header {
  padding: 40px 0;
}
.modify-wrap >>> .el-dialog__body {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0;
}

.modify-wrap >>> .el-form-item {
  margin-bottom: 10px !important;
}
.modify-wrap >>> .org-box .el-checkbox {
  width: 45%;
}
/* .modify-wrap .form2 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.modify-wrapp .form3 >>> .el-form-item__label {
  display: block;
  float: left !important;
}
.modify-wrap .form3 >>> .el-checkbox {
  display: block !important;
}
.modify-wrap .form4 >>> .el-form-item__label {
  display: block;
  float: left !important;
} */
.org-box {
  padding: 5px;
  width: 100%;
  height: 250px;
  /* overflow-y: scroll; */
  /* border: 1px solid #e7e9e8; */
  border-radius: 5px;
  box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
  /* background: rgba(0, 0, 0, 0.1); */
}
.org-scroll {
  width: 100%;
  height: 230px;
  overflow-y: scroll;
}
</style>
